//光配连接
var LogicConnectChart = Chart = {
    DeviceWidth:300,//橱柜宽度
    DeviceSpace:360,//设备间隔
    DeviceVerSpace:60,//设备竖向间隔
    DeviceColumn:3,
    TitleHeight:40,//橱柜标题高度
    TitleBg:'#00a698',//橱柜标题背景
    LineColor:'#6297c9',//橱柜标题背景
    TitleFontSize:'20',//橱柜标题字体大小
    BlockNameFontSize:'14',
    DeviceHeight:60,
    PortHeight:50,
    PortVerSpace:2,
    iconWidth : 30,
    iconHeight : 30,
    parseFrom: function(txData,rxData,fibreData,deviceModuleData, virtulPortData){
        /*
        //发送装置及端口信息
        txData,rxData = {
            UNIT_ID : 1,
            UNIT_DESC : '#主变保护A套',
            PORT_ID : 1,
            PORT_NAME : 'B01-A'
        };
        fibreData = {
            NAME:'gcb0'
        }
        deviceModuleData = {
            "count": 1,
            "list": [
                {
                    "APPID": "1112",
                    "DATSET_REF": "IL2207BRPIT/LLN0$dsGOOSE0",
                    "MAC": "01-0C-CD-01-11-12",
                    "VLAN": "000"
                }
            ]
        };
        virtulPortData = {
            "count": 15,
            "list": [
                {
                    "DESC": "断路器位置",//箭头起点
                    "EXT_DESC": "总断路器位置",//箭头终点
                    "FCDA_INDX": 1,//排序
                    "ID": 1541,
                    "TYPE": "GO"//颜色
                },
                ...
            ]
        }
        */
        var chart = {};
        chart.x=0;
        chart.y=0;
        chart.deviceModuleData = deviceModuleData;
        chart.virtulPortData = virtulPortData;
        chart.txData = txData;
        chart.rxData = rxData;
        chart.fibreData = fibreData;
        chart.virtulPortData.list.sort(function(a,b){
            return a.FCDA_INDX - b.FCDA_INDX;
        });
        //增加一些方法
        chart.getTotalWidth = function(){
            return Chart.DeviceWidth * 2 + Chart.DeviceSpace;
        };
        chart.getTotalHeight = function(){
            return Chart.TitleHeight + Chart.PortHeight + this.virtulPortData.list.length * (Chart.PortHeight + Chart.PortVerSpace);
        }
        chart.draw = function(canvas){
            Chart.draw(this, canvas);
        };
        chart.getPortByPoint = function(x ,y){
            for(var i=0;i<this.clickedObjects.length;i++){
                //1.点击的是不是此交换机接口？
                var p = this.clickedObjects[i];
                //上半部分是of_id
                if(p.x < x && p.x + p.w > x && p.y < y && p.y + p.h > y){
                    return p;
                }
            }
            return null;
        }
        return chart;
    },
    drawTitle : function(x,y,unit_name,canvas){
        //绘制标题背景
        canvas.fillStyle = Chart.TitleBg;
        canvas.fillRect(x, y, Chart.DeviceWidth, Chart.TitleHeight);
        //小图标
        var img = new Image();    
        img.src = config.icon_device_url;
        if(img.complete){
            canvas.drawImage(img,x, y+5, Chart.iconWidth , Chart.iconHeight);
        }else{
            img.onload = function(){
                canvas.drawImage(img,x, y+5, Chart.iconWidth , Chart.iconHeight);
            }
        }
        //绘制标题
        canvas.font = Chart.TitleFontSize + "px " + Device.headerFontFamily;
        canvas.fillStyle = Device.headerFontColor;
        canvas.textAlign="left";
        canvas.fillText(unit_name,x + Chart.iconWidth, y + Chart.TitleHeight / 2 + Chart.TitleFontSize / 2 - 3, Chart.DeviceWidth - Chart.iconWidth - 5);
    },
    drawDevicePort : function(x,y,leftPorts,rightPorts,chart){
        var r = Math.max(leftPorts.length, rightPorts.length);
        //绘制背景
        canvas.fillStyle = '#cccccc';
        canvas.fillRect(x, y, Chart.DeviceWidth, chart.getTotalHeight() - Chart.TitleHeight);
        var deviceIndex = 0;
        var preDevice = null;
        for(var i = 0; i<leftPorts.length;i++){
            if(preDevice == null){
                preDevice = leftPorts[i].device;
            }else if(preDevice.data.EXT_UNIT_ID != leftPorts[i].device.data.EXT_UNIT_ID){
                preDevice = leftPorts[i].device;
                deviceIndex++;
            }
            var cy = y + i * Chart.PortHeight + (i-deviceIndex) * Chart.PortVerSpace + deviceIndex * (Chart.DeviceVerSpace+Chart.TitleHeight);
            Chart.drawPort(x,cy,'left',leftPorts[i],canvas);
            leftPorts[i].device.data.PORT_DIRECTION = 'Tx';
            leftPorts[i].device.data.PORT_NAME = leftPorts[i].device.data.EXT_PORT_NAME;
            Chart.drawPort(x - Chart.DeviceSpace - Chart.DeviceWidth / 2, cy, 'right', leftPorts[i].device.data,canvas);
            Chart.drawLiner(
                x - Chart.DeviceSpace, 
                cy + Chart.PortHeight / 2,
                x,
                cy + Chart.PortHeight / 2,
                leftPorts[i],
                chart,
                canvas);
        }
        var deviceIndex = 0;
        var preDevice = null;
        for(var i = 0; i<rightPorts.length;i++){
            if(preDevice == null){
                preDevice = rightPorts[i].device;
            }else if(preDevice.data.EXT_UNIT_ID != rightPorts[i].device.data.EXT_UNIT_ID){
                preDevice = rightPorts[i].device;
                deviceIndex++;
            }
            var cy = y + i * Chart.PortHeight + (i-deviceIndex) * Chart.PortVerSpace + deviceIndex * (Chart.DeviceVerSpace+Chart.TitleHeight);
            rightPorts[i].x = x;
            rightPorts[i].y = y;
            Chart.drawPort(x + Chart.DeviceWidth / 2,cy,'right',rightPorts[i],canvas);
            rightPorts[i].device.data.PORT_DIRECTION = 'Rx';
            rightPorts[i].device.data.PORT_NAME = rightPorts[i].device.data.EXT_PORT_NAME;
            Chart.drawPort(x + Chart.DeviceSpace + Chart.DeviceWidth, cy, 'left', rightPorts[i].device.data,canvas);
            Chart.drawLiner(
                x + Chart.DeviceSpace + Chart.DeviceWidth, 
                cy + Chart.PortHeight / 2,
                x + Chart.DeviceWidth,
                cy + Chart.PortHeight / 2,
                rightPorts[i],
                chart,
                canvas);
        }
    },
    draw : function(chart, canvas){
        var x = chart.x;
        var y = chart.y;
        chart.clickedObjects = [];
        Chart.drawTitle(x, y, chart.txData.UNIT_DESC, canvas);
        Chart.drawTitle(x + Chart.DeviceWidth + Chart.DeviceSpace, y, chart.rxData.UNIT_DESC, canvas);
        //绘制整个底图
        canvas.fillStyle = '#a3c4c1';
        canvas.fillRect(x, y + Chart.TitleHeight, Chart.DeviceWidth, chart.getTotalHeight() - Chart.TitleHeight);
        canvas.fillRect(x + Chart.DeviceWidth + Chart.DeviceSpace, y + Chart.TitleHeight, Chart.DeviceWidth, chart.getTotalHeight() - Chart.TitleHeight);

        //画控制块信息
        var blockHeight = (Chart.TitleHeight + Chart.PortHeight) / 5;
        var cx = x + Chart.DeviceWidth;
        //绘制标题背景
        canvas.fillStyle = '#29869e';
        canvas.fillRect(cx, y, Chart.DeviceSpace, blockHeight);
        canvas.fillStyle = '#427d78';
        canvas.fillRect(cx, y + blockHeight, Chart.DeviceSpace, Chart.TitleHeight + Chart.PortHeight - blockHeight);        
        //绘制线
        canvas.beginPath();
        canvas.strokeStyle = Chart.LineColor;
        canvas.lineWidth=1;
        for(var i=0;i<6;i++){
            canvas.moveTo(cx,y + i*blockHeight);
            canvas.lineTo(cx + Chart.DeviceSpace ,y + i*blockHeight);
        }
        canvas.stroke();
        //绘制控制块信息
        canvas.font = Chart.BlockNameFontSize + "px " + Device.headerFontFamily;
        canvas.fillStyle = Device.headerFontColor;
        canvas.textAlign="center";
        canvas.fillText(chart.fibreData.NAME,cx + Chart.DeviceSpace / 2, y + blockHeight / 2 + Chart.BlockNameFontSize / 2 - 3, Chart.DeviceSpace);
        canvas.fillText(chart.deviceModuleData.list[0].MAC,cx + Chart.DeviceSpace / 2, y + blockHeight * 1 + blockHeight / 2 + Chart.BlockNameFontSize / 2 - 3, Chart.DeviceSpace);
        canvas.fillText(chart.deviceModuleData.list[0].DATSET_REF,cx + Chart.DeviceSpace / 2, y + blockHeight * 2 + blockHeight / 2 + Chart.BlockNameFontSize / 2 - 3, Chart.DeviceSpace);
        canvas.fillText(chart.deviceModuleData.list[0].APPID,cx + Chart.DeviceSpace / 2, y + blockHeight * 3 + blockHeight / 2 + Chart.BlockNameFontSize / 2 - 3, Chart.DeviceSpace);
        canvas.fillText(chart.deviceModuleData.list[0].VLAN,cx + Chart.DeviceSpace / 2, y + blockHeight * 4 + blockHeight / 2 + Chart.BlockNameFontSize / 2 - 3, Chart.DeviceSpace);

        //绘制接口
        cx = chart.x;
        cy = chart.y + Chart.TitleHeight;
        chart.txData.PORT_DIRECTION = 'Tx';
        Chart.drawPort(cx + Chart.DeviceWidth / 2,cy,'right',chart.txData,canvas);
        Chart.drawLine(cx,cy + Chart.PortHeight,cx+Chart.DeviceWidth,cy+Chart.PortHeight,Chart.PortVerSpace,canvas);
        chart.rxData.PORT_DIRECTION = "Rx";
        Chart.drawPort(cx + Chart.DeviceWidth + Chart.DeviceSpace,cy,'left',chart.rxData,canvas);
        Chart.drawLine(cx + Chart.DeviceWidth + Chart.DeviceSpace,cy + Chart.PortHeight,cx + Chart.DeviceWidth + Chart.DeviceSpace+Chart.DeviceWidth,cy+Chart.PortHeight,Chart.PortVerSpace,canvas);
        //绘制虚拟端口
        for(var i=0;i<chart.virtulPortData.list.length;i++){
            var data = chart.virtulPortData.list[i];
            var cy = chart.y + Chart.TitleHeight + Chart.PortHeight + i * (Chart.PortHeight + Chart.PortVerSpace);
            canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
            canvas.fillStyle = Device.headerFontColor;
            canvas.textAlign="center";
            //左侧
            canvas.fillText(data.DESC,chart.x + Chart.DeviceWidth / 2, cy + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth);
            Chart.drawLine(chart.x,cy + Chart.PortHeight,chart.x + Chart.DeviceWidth,cy+Chart.PortHeight,Chart.PortVerSpace,canvas)
            //右侧
            canvas.fillText(data.EXT_DESC,chart.x + Chart.DeviceWidth + Chart.DeviceSpace + Chart.DeviceWidth / 2, cy + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth);
            Chart.drawLine(chart.x + Chart.DeviceWidth + Chart.DeviceSpace ,cy + Chart.PortHeight,chart.x + Chart.DeviceWidth + Chart.DeviceSpace + Chart.DeviceWidth,cy+Chart.PortHeight,Chart.PortVerSpace,canvas)
            //箭头
            Chart.drawArrow(
                x + Chart.DeviceWidth,cy + Chart.PortHeight / 2,
                x + Chart.DeviceWidth + Chart.DeviceSpace,cy + Chart.PortHeight / 2,
                data.TYPE,
                chart,canvas
            );
        }
    },
    drawPort:function(x,y,portDirection,data,canvas){
        var cx,cy;
        if(portDirection == "left"){
            cx = x;
            cy = y;
        }else{
            cx = x + Chart.DeviceWidth / 2 - Chart.PortHeight;
            cy = y;
        }
        var img = new Image();    
        if(portDirection == "left"){
            if(data.PORT_DIRECTION == "Rx"){
                img.src = config.icon_left_in_url;
            }else if (data.PORT_DIRECTION == "Tx"){
                img.src = config.icon_left_out_url;
            }else{
                img.src = config.icon_left_in_out_url;
            }
        }else{
            if(data.PORT_DIRECTION == "Rx"){
                img.src = config.icon_right_in_url;
            }else if (data.PORT_DIRECTION == "Tx"){
                img.src = config.icon_right_out_url;
            }else{
                img.src = config.icon_right_in_out_url;
            }
        }
        if(img.complete){
            canvas.drawImage(img,cx + 1, cy + 1, Chart.PortHeight - 3, Chart.PortHeight - 3);
        }else{
            img.onload = function(){
                canvas.drawImage(img,cx + 1, cy + 1, Chart.PortHeight - 3, Chart.PortHeight - 3);
            }
        }
        //绘制背景
        canvas.fillStyle = '#a3c4c1';
        canvas.fillRect(x, y, Chart.DeviceWidth / 2, Chart.PortHeight);

        canvas.beginPath();
        canvas.strokeStyle = '#6699cc';
        canvas.lineWidth=Chart.PortVerSpace;
        canvas.moveTo(x,y);
        canvas.lineTo(x + Chart.DeviceWidth / 2 ,y);
        canvas.moveTo(x,y + Chart.PortHeight);
        canvas.lineTo(x + Chart.DeviceWidth / 2 ,y + Chart.PortHeight1);
        canvas.stroke();
        //画出名字
        canvas.font = Device.headerFontSize + "px " + Device.fontFamily;
        canvas.fillStyle = Device.headerFontColor;
        canvas.textAlign="center";
        if(portDirection == "left"){
            canvas.fillText(data.PORT_NAME,x + Chart.PortHeight + (Chart.DeviceWidth - Chart.PortHeight) / 2, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
            //分割线
            canvas.beginPath();
            canvas.strokeStyle = '#6699cc';
            canvas.lineWidth=1;
            canvas.moveTo(x + Chart.PortHeight,y);
            canvas.lineTo(x + Chart.PortHeight,y + Chart.PortHeight);
            canvas.stroke();
        }else{
            canvas.fillText(data.PORT_NAME,x - Chart.PortHeight / 2, y + Chart.PortHeight / 2 + Device.headerFontSize / 2, Chart.DeviceWidth - Chart.PortHeight * 2);
            //分割线
            canvas.beginPath();
            canvas.strokeStyle = '#6699cc';
            canvas.lineWidth=1;
            canvas.moveTo(x + Chart.DeviceWidth / 2 - Chart.PortHeight,y);
            canvas.lineTo(x + Chart.DeviceWidth / 2 - Chart.PortHeight,y + Chart.PortHeight);
            canvas.stroke();
        }
    },
    drawLine:function(x1,y1,x2,y2,lineWidth,canvas){
        canvas.beginPath();
        canvas.strokeStyle = Chart.LineColor;
        canvas.lineWidth=lineWidth;
        canvas.moveTo(x1,y1);
        canvas.lineTo(x2,y2);
        canvas.stroke();
    },
    drawArrow:function(x1,y1,x2,y2,type,chart,canvas){
        var arrowColor = config.logic_fibre_color[type];
        //画箭头
        drawArrow(canvas, x1 , y1, (x1<x2?x2 - 4:x2 + 4), y2, 20,15, 4, arrowColor);
    }
};